<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <router-link to='/'>首页</router-link>
            <router-link to='/sub'>子页</router-link>
        </div>
        <router-view></router-view>
    </div>
    <script src='vue.js'></script>
    <script src='vue-router.js'></script>
    <script>
        const shouye = {template:'<h1>这是首页</h1>'}
        const ziye = {template:'<h1>这是子页</h1>'}
        const routes = [
            {path:'/',component:shouye},
            {path:'/sub',component:ziye}
        ]
        const router = new VueRouter({
            routes,
        }) 
        new Vue({
            el:'#app',
            router,
        })
    </script>
</body>
</html>